{% load bootstrap_pagination %}

<div id="comments-anchor"></div>

<div class="page-header">
    <h4>网友评论 <small>共{{ comments|length }}条</small>
        <small class="pull-right">
            <a href="#comment-form">发表评论</a>
            <a href="#top">返回顶部</a>
        </small>
    </h4>
</div>

<div id="comments">
    {% for comment in comments %}
        {% include 'translations/comments/partial_article_comment.html' %}
    {% empty %}
        <div class="text-center">暂无网友评论</div>
    {% endfor %}

    {% if comments.paginator.num_pages > 1 %}
        <hr>
        {% bootstrap_paginate comments range=10 url_param_name="comment_page" url_anchor="comments-anchor" %}
    {% endif %}
</div>

{% if user.is_authenticated %}
<div class="row hidden" style="margin-top: 10px;">
    <div class="col-md-6 col-md-offset-1">
        <form role="form" id="reply-form">
            {% csrf_token %}
            <input type="hidden" id="id-parent" name="parent" value="">
            <div class="form-group">
                <label class="sr-only" for="id-reply">Comment</label>
                <textarea class="form-control" cols="30" id="id-reply" name="comment" rows="5"></textarea>
            </div>
            <button type="button" class="btn btn-default" id="reply">回复</button>
            <button type="button" class="btn btn-default" id="reply-close">关闭</button>
        </form>
    </div>
</div>

<div class="row" style="margin-top: 30px;">
    <div class="col-md-1"><img class="media-object" src="{{ user.profile.get_avatar }}" style="width: 64px; height: 64px; border-radius: 5px;"></div>
    <div class="col-md-11">
        <form role="form" id="comment-form">
            {% csrf_token %}
            <div class="form-group">
                <label class="sr-only" for="id-comment">Comment</label>
                <textarea class="form-control" cols="40" id="id-comment" name="comment" rows="5"></textarea>
            </div>
            <button type="button" class="btn btn-default" id="comment">发表评论</button>
        </form>
    </div>
</div>

<script>
    $("#comment-form #comment").click(function() {
        $.ajax({
            type: "POST",
            url: "{% url 'translations:comments:create' article.id %}",
            data: $("#comment-form").serialize(),
            cache: false,
            success: function (data) {
                $("#comments").append(data);
                $("#id-comment").val('');
            }
        });
    });

    $("#comments .remove-comment").click(function() {
        var media = $(this).closest(".media");
        var comment = $(media).attr("comment-id");
        var csrftoken = getCookie("csrftoken");
        $.ajax({
            type: "POST",
            url: "{% url 'translations:comments:delete' %}",
            data: {
                "comment": comment,
                "csrfmiddlewaretoken": csrftoken
            },
            cache: false,
            success: function(data) {
                $(media).fadeOut(400, function () {
                    $(media).remove();
                });
            }
        });
    });

    $("#comments .reply").click(function() {
        var reply_form = $("#reply-form");
        var reply_row = $(reply_form).closest(".row");
        $(reply_row).removeClass("hidden");
        $(reply_row).addClass("show");
        var comment_div = $(this).closest(".media");
        $(comment_div).append(reply_row);
        var parent = $(comment_div).attr("comment-id");
        $("#reply-form #id-parent").val(parent);
    });

    $("#reply-form #reply").click(function() {
        $.ajax({
            type: "POST",
            url: "{% url 'translations:comments:create' article.id %}",
            data: $("#reply-form").serialize(),
            cache: false,
            success: function(data) {
                var reply_form = $("#reply-form");
                var reply_row = $(reply_form).closest(".row");
                $(reply_row).removeClass("show");
                $(reply_row).addClass("hide");

                $("#comments").append(data);
                $("#id-reply").val('');
            }
        });
    });

    $("#reply-form #reply-close").click(function() {
        var reply_form = $("#reply-form");
        var reply_row = $(reply_form).closest(".row");
        $(reply_row).removeClass("show");
        $(reply_row).addClass("hide");
    });
</script>
{% endif %}